<template>
	<div >
    <div style="font-size: 50px;color: #2798f4;font-family: 楷体;border-bottom: 1px solid #8c8b8b;">
          我的评论
    </div>
       <div v-for="comment in commentList" :key="comment.id" style="margin-left: 20px;padding-bottom: 10px;position: relative">
         <div><span style="color: red">新闻标题：</span>
           <span style="font-size: 30px">
             <router-link :to="{path:'/newsDetail',query:{id:comment.newsId}}">
               {{comment.newsName}}
              </router-link>
            </span>&nbsp;
          </div>
         <div><button type="button" style="position: absolute;right: 10px;top: 10px;background-color: red" @click="deleteComment(comment.newsId,comment.id)" > 删除</button></div>

         <div style="height: 50px;height: 100px" >
           <div style="color: red">评论内容:</div>
          {{comment.content}}
           <br/>
           <span style="color: #999999">评论时间:</span><span style="color: #999999">{{comment.operTime}}</span>

         </div>


       </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      commentList:[],
    }
  },methods: {
    deleteComment(newsid,commentId){
      this.$confirm('您确定要删除此条评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //添加请求地点
        /*发送修改状态的请求*/
        this.$http.get("userApi/CommentCtl/deleteComment?commentId="+commentId+"&newsid="+newsid).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              showClose: true,
              message: '恭喜你，修改成功✔',
              type: 'success'
            });
            this.$router.go();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }

  },
  mounted() {
    //获取评论信息
      this.$http.get("userApi/CommentCtl/CommentList").then((resp) => {
        if (resp.data.code==200){
          this.commentList = resp.data.data;
        }
      })
  }

}
</script>
<style scoped>
</style>

